<template>
    <!-- <div v-show="!isCollapse" id="left" class="left">
      <el-menu id="nav" :collapse="isCollapse" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
        <el-menu-item index="1">
          <i class="el-icon-document-copy"/>
          <span slot="title" @click="jumpInto('place')">场地基本信息</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"/>
          <span slot="title" @click="jumpInto('pollutant')">污染物信息</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-rank"/>
          <span slot="title" @click="jumpInto('sampling')">采样点位</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-document-checked"/>
          <span slot="title" @click="jumpInto('data')">检测数据</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-document-add"/>
          <span slot="title" @click="jumpInto('fix')">修复目标</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-edit"/>
          <span slot="title" @click="jumpInto('remark')">备注</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-position"/>
          <span slot="title" @click="jumpInto('trail')">跟踪监测</span>
        </el-menu-item>
      </el-menu>
    </div> -->
    <div>
      <div id="topPart">顶部距离</div>
        <div id="navBar" :class="{isFixed:istabBar}">固定导航栏</div>
        <div id="mainPart">
          <ul>
            <li>内容部分</li>
          </ul>
        </div>
    </div>
</template>

<script>
  /* export default {
    components: {},
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
    },
    data() {
      return {
        searchBarFixed: false
      };
    },
    methods: {
      handleScroll() {
        const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        const nav = document.getElementById('nav')
        顶部导航栏的高度为60px，scrollTop为滚动条到顶部的距离
        头部不固定
        if (scrollTop >= 0 && scrollTop < 60) {
          nav.style.top = '60px'
        }else {
          nav.style.top = scrollTop + 'px'
        }
        头部固定
        if (scrollTop >= 0 && scrollTop < 60) {
          nav.style.top = '0px'
        } else {
          nav.style.top = scrollTop - 60 + 'px'
        }
          nav.style.top = scrollTop + 'px'
        还得考虑底部，窗口小了会掉下来

      }
    }
  }; */
   export default {
        data () {
            return {
                istabBar: false
            }
        },
        methods: {
            // 添加一个方法 兼容
            handleScroll () {
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                        
                    // 固定导航栏
                    let topBar = document.querySelector("#topPart");
                    let navBar = document.querySelector("#navBar");
                    let mainPart = document.querySelector("#mainPart");
                    if (scrollTop > topBar.offsetHeight){
                        this.istabBar = true
                        mainPart.style.paddingTop = navBar.offsetHeight + "px";
                    } else {
                        this.istabBar = false
                        mainPart.style.paddingTop = "0px";
                    }
            }
        },
        mounted () {
            window.addEventListener('scroll', this.handleScroll); // Dom树加载完毕
        },
        destroyed () {
            window.removeEventListener('scroll', this.handleScroll) // 销毁页面时清除
        }
    }
</script>
<style>
  .left{
    width:210px;
    height:100%;
    position:absolute;
  }
  #nav{
    /* 如果设置position:absolute，不保留原位，如果父元素或祖先元素没有定位，位置相对浏览器。 */
    /* 如果设置position:relative,相对原位（自恋型） */
    /* fixed：不保留原位，以浏览器为可视窗口，如果top+height+在它下方元素的高度 > 可视窗口高度，就会压住下方盒子 */
    /* position:fixed;
    top:60px; */
    /* 子相父相，但是窗口缩小到一定程度它会掉下来 */
    position: absolute;
    padding-top:20px;
    top:0px;
    width:209px;
    min-height:200px;
  }
  #topPart{
    width: 100%;
    height: 100px;
    background-color: yellow;
  }
  .isFixed {
    position: fixed;
    top: 0;
    z-index: 10;
  }
  #navBar {
    width: 100%;
    height: 500px;
    background-color: red;
  }
  #mainPart {
    width: 100%;
  }
  #mainPart ul {
    width: 100%;
  }
  #mainPart ul li {
    width: 100%;
    height: 40px;
    background-color: orange;
    margin-bottom: 10px;
  }
</style>
